<template>
  <div>
    <!-- 搜索栏 -->
    <div style="height: 60px;background: #fcfcbc;width: 100%">
      <el-row style="height: 60px;text-align: left;margin-left: 0">
        <el-col :span="12" style="margin-top: 20px">
        </el-col>

        <el-col :span="10" :offset="2">
          <el-input placeholder="输入车牌号搜索" v-model="searchText" @keyup.enter.native="doSearch" style="margin-top: 10px;width: 80%">
            <template slot="append">
              <el-button type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>

    <!-- 列表名-->
    <el-table
      :data="tableData"
      :stripe="true"
      style="width: 100%;height: 509px;overflow: auto">

      <el-table-column
        type="index"
        :index="indexMethod">
      </el-table-column>

      <el-table-column align="center" prop="carLicenseId">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">车牌号</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="ownerId">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">业主ID</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="ownerName">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">业主姓名</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop=#>
        <template slot="header" slot-scope="scope">
          <span class="headerLine">操作</span>
        </template>

        <template slot-scope="scope">
          <el-button @click="doCheck(scope.row.ownerId)" size="mini" type="primary">查看详情</el-button>
          <!--<el-button @click="doEdit(scope.$index, scope.row)" type="warning" size="mini">编辑</el-button>-->
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>
export default {
  name: "CarInfo",
  data() {
    return {
      searchText: '',
      tableData: [
        {
          carLicenseId: '',
          ownerId: '',
          ownerName: ''
        }
      ]

    }
  },
  methods:{
    indexMethod(index) {
      return index;
    },
    doSearch() {
      this.$axios({
        url: "/car/queryOwnerByCarId",
        params: {carLicenseId:this.searchText}
      }).then(res=>{
        this.tableData = []
        this.tableData.push(res.data)
      })
    }
  },

  mounted() {
    this.$axios({
      url: '/car/carList'
    }).then(res => {
      res.data.forEach((value)=>{
      })
      this.tableData = res.data;
      console.log(res);
    })
  }
}
</script>

<style scoped>

.headerLine {
  color: #c17b1f;
  font-size: 20px;
}
</style>
